<template>
  <div class="p-[20px] bg-[#f4f6f6] h-full">
    <div
      class="bg-[url('@/assets/svg/file1.png')] bg-cover bg-no-repeat w-[100%] h-[100px] rounded-[10px] pt-[10px] pl-[10px]"
    >
      <div
        class="text-white font-bold text-[22px] transform translate-x-[150px] translate-y-[10px]"
      >
        客户服务管理平台
      </div>
      <div
        class="text-white text-[#888AAB] text-[14px] translate-x-[150px] translate-y-[15px]"
      >
        快速对接、数据溯源、安全保障、场景化服务” 的智能客户服务管理系统
      </div>
    </div>

    <div class="flex mt-[20px]">
      <div class="flex-1 user-containter">
        <s-table
          ref="table"
          class="table-container"
          :columns="columns"
          :form="form"
          :loadData="loadData"
        >
          <template #operator>
            <div class="flex">
              <a-button type="primary" @click="handleGutter('新增')">
                新增用户
              </a-button>
            </div>
          </template>
          <template #operations="{ scope }">
            <a-button
              type="link"
              size="small"
              @click="handleGutter('详情', scope.row)"
              style="margin-left: 10px"
            >
              详情
            </a-button>
            <a-button
              type="link"
              size="small"
              @click="handleGutter('编辑', scope.row)"
              style="margin-left: 10px"
            >
              编辑
            </a-button>
            <a-popconfirm
              title="您确定要删除吗？"
              placement="top"
              @confirm="handledelete(scope.row)"
            >
              <a-button
                type="link"
                size="small"
                style="margin-left: 10px"
                danger
              >
                删除
              </a-button>
            </a-popconfirm>
          </template>
        </s-table>
        <UserModel
          ref="modelRef"
          :loadData="
            () => {
              table.refresh();
            }
          "
        ></UserModel>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { form, columns, getEnumData } from "./form.js";
import UserModel from "./userModel.vue";
import "./index.css";
import { delUser, selectUser } from "@/api/index.js";

onMounted(() => {
  getEnumData();
});

const table = ref(null);
const modelRef = ref(null);

const loadData = (params) => {
  return selectUser(params).then((res) => {
    return {
      total: res.data.total || 0,
      data: res.data.users || [],
    };
  });
};

const handleGutter = (label, params) => {
  const p = { ...params };
  switch (label) {
    case "新增":
      modelRef.value.handleVisible(true, label, {});
      break;
    default:
      modelRef.value.handleVisible(true, label, p);
      break;
  }
};

const handledelete = (params) => {
  delUser({ id: params.id }).then(() => {
    message.success("删除成功");
    table.value.refresh();
  });
};
</script>
